const path = require('path')
// 导入html-webpack-plugin 插件
const HtmlPlugin = require('html-webpack-plugin')
// 左侧的花括号是结构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const htmlPligin = new HtmlPlugin({
    // 要复制的文件路径
    template: './src/index.html',
    // 复制出来的文件路径
    filename: './index.html'
})
// 使用node.js 导出 webpack 
module.exports = {
    // 代表 webpack 运行模式 development 和 production
    mode: 'development',
    // 在开发调试阶段 建议将 devtool 的值设为 eval-source-map 
    // devtool: 'eval-source-map',
    // 在上线阶段 将报错的信息只显示行号 不显示 源码
    devtool: "nosources-source-map",
    // entry "指定要处理的文件"
    entry: path.join(__dirname, './src/index.js'),
    // output 指定要生成的文件目录
    output: {
        path: path.join(__dirname, 'dist'),
        // 生成的文件名
        filename: "js/bundle.js"
    },
    // 插件的数组 在运行 webpack 会调用插件
    plugins: [htmlPligin, new CleanWebpackPlugin()],
    devServer: {
        // 第一次 打包文件 默认打开 页面
        open: true,
        // 将打开的页面改为 80 号端口
        port: 80,
    },
    module: {
        rules: [
            // 文件后缀名的匹配规则 
            { test: /\.less$/, use: ['style-loader', 'css-loader'] },
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            {
                test: /\.jpg|gif|png$/, use: {
                    loader: 'url-loader',
                    options: {
                        limit: 22228,
                        // 声明把打包生成的图片文件，存储到 dist 文件目录下 image 文件夹中
                        outputPath: 'image'
                    }
                }
            },
            { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ }
        ]
    },
    resolve:{
        alias:{
            "@":path.join(__dirname,'./src/')
        }
    }

}